<template>
	<view >
		<view v-show="!loadingone">
			<navbar name="影响因素"></navbar>
			<view class="w706">
				<view class="influence-title">
					<text class="influence-text" :class="result.reasonType==1?'influence-n':'influence-w'">{{result.riskName}}</text>
				</view>
				<view class="influence-center" v-show="result.riskDesc">
					{{result.riskDesc}}
				</view>
			</view>
			<view class="w706" v-if="result.riskDiseaseInfoList.length !=0">
				<view class="ve-title">
					相关风险
				</view>
				<block v-for="(item,idx) in result.riskDiseaseInfoList" :key="idx">
					<view class="illness-flex">
						<view class="illness-title">
							{{item.diseaseName}}
						</view>
						<view class="illness-score">
							<view class="shade">
								<view :class="'shade-pa' +item.risk">
									<view class="shade-pr">
										{{item.riskWeight}}
									</view>
								</view>
							</view>
							<view class="weui-flex">
								<view class="type-text type-texta">
									较低
								</view>
								<view class="type-text type-texta">
									一般
								</view>
								<view class="type-text type-texta">
									较高
								</view>
								<view class="type-text">
									极高
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="w706" v-if="result.lifeSuggest != null">
				<view class="ve-title">
					生活建议
				</view>
				<view class="advice-cen">
					{{result.lifeSuggest}}
				</view>
			</view>
			<view style="height: 200upx;">
			</view>
		</view>
		<view class="loading-box">
		      <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

	export default {
		components: {
			uLoading,
		},
		data() {
			return {
				loadingone:false,
				result: '', //数据
			}
		},
		onLoad(e) {
			this.getDisease(e.riskId);
			
		},
		methods: {
			getDisease(riskId) {
				let _this = this;
				_this.loadingone = true;
				this.$api.get(global.apiUrls.getDisease + riskId, {}).then(res => {
					if (res.data.code == 1000) {
						let result = res.data.result,
						illnessList = [];
						for(let i =0; i<result.riskDiseaseInfoList.length;i++){
							if(result.riskDiseaseInfoList[i].riskWeight <30){//整理段位低
								result.riskDiseaseInfoList[i].risk = 1
							}else if(result.riskDiseaseInfoList[i].riskWeight <50){
								result.riskDiseaseInfoList[i].risk = 2
							}else if(result.riskDiseaseInfoList[i].riskWeight <60){
								result.riskDiseaseInfoList[i].risk = 3
							}else{
								result.riskDiseaseInfoList[i].risk = 4
							}
							result.riskDiseaseInfoList[i].riskWeight = parseInt(result.riskDiseaseInfoList[i].riskWeight)
						}
						_this.result = result;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
					_this.loadingone = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	.w706 {
		width: 706upx;
		background: #fff;
		margin: 30upx auto 0;
		padding: 20upx;
		border-radius: 25upx;
	}

	.ve-title {
		height: 100upx;
		line-height: 80upx;
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		padding-left: 60upx;
		position: relative;
	}

	.ve-title::before {
		content: '';
		position: absolute;
		top: 24upx;
		left: 4upx;
		width: 10upx;
		height: 36upx;
		background: #2EA7E0;
		border-radius: 5upx;
	}

	.influence-title {
		font-size: 54upx;
		font-weight: 500;
		color: #333333;
		line-height: 75upx;


	}

	.influence-text {
		position: relative;
	}
	.influence-n::before,.influence-w::before{
		content: '内因';
		width: 64upx;
		height: 38upx;
		position: absolute;
		top: 20upx;
		right: -94upx;
		background: #FF8F1F;
		border-radius: 4upx;
		margin-left: 20upx;
		font-size: 24upx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 38upx;
		text-align: center;
	}
	.influence-w::before{
		content: '外因';
	}
	.influence-center {
		font-size: 36upx;
		color: #333333;
		line-height: 64upx;
	}

	.advice-cen {
		font-size: 36upx;
		font-weight: 400;
		color: #333333;
		line-height: 64upx;
	}

	.illness-flex {
		display: flex;
		height: 150upx;

		.illness-title {
			min-width: 150upx;
			height: 90upx;
			font-size: 30upx;
			font-weight: 400;
			color: #333333;
			line-height: 90upx;
		}

		.illness-score {
			width: 518upx;
			height: 40upx;
		}
	}

	.shade {
		width: 518upx;
		height: 22upx;
		background: linear-gradient(270deg, #0077FF 0%, #00B7FF 12%, #17EEFF 25%, #45F6D0 38%, #79EBB0 52%, #D2E1AD 65%, #E4B46A 80%, #F37C30 90%, #FF0000 100%);
		box-shadow: 0 2upx 2upx 0 rgba(0, 0, 0, 0.12);
		border-radius: 21upx;
		margin: 34upx 0 0;
		position: relative;
	}

	.shade-pa1,.shade-pa2,.shade-pa3,.shade-pa4 {
		width: 65upx;
		height: 65upx;
		position: absolute;
		background: #05C4FF;
		top: -70upx;
		left: 40upx;
		border-radius: 50%;
		font-size: 15upx;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 65upx;
		text-align: center;
	}
	.shade-pa2{
		left: 165upx;
	}
	.shade-pa3{
		left: 290upx;
	}
	.shade-pa4{
		left: 426upx;
	}
	.shade-pr {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.shade-pr::before {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		bottom: -20upx;
		left: 50%;
		transform: translateX(-50%);
		border-left: 10upx solid transparent;
		border-right: 10upx solid transparent;
		border-top: 30upx solid #05C4FF;
	}

	.type-text {
		width: 164upx;
		text-align: center;
		padding: 14upx 0 30upx;
		font-size: 24upx;
		font-weight: 400;
		color: #485465;
		line-height: 33upx;
	}

	.type-texta {
		position: relative;
	}

	.type-texta::before {
		content: '';
		width: 1px;
		height: 16upx;
		background: #E3E3E3;
		right: 0;
		top: 6upx;
		position: absolute;
	}
</style>
